<template>
	<div>
		<el-container>
			<head-top></head-top>
			<el-header>
				<el-form :inline="true" :model="formInline" @submit.native.prevent class="form-inline form-menu-list">
					<el-form-item label="机房名称">
						<el-input v-model="formInline.idcName" placeholder="机房名称" @keyup.enter.native="onSearch"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="onSearch">查询</el-button>
					</el-form-item>
				</el-form>
				<el-form :inline="true" class="form-inline form-menu-function">
					<el-button type="primary" icon="el-icon-edit" @click="createIdc">新增</el-button>
				</el-form>
			</el-header>
			<el-main>
				<el-table :data="tableData" :row-class-name="tableRowClassName">
					<el-table-column prop="id" label="序号" width="100">
					</el-table-column>
					<el-table-column prop="idcName" label="IDC名称" width="300">
					</el-table-column>
					<el-table-column prop="area" label="区域" width="200">
					</el-table-column>
					<el-table-column prop="contact" label="联系人" width="200">
					</el-table-column>
					<el-table-column prop="contactPhone" label="联系电话" width="200">
					</el-table-column>
					<el-table-column prop="status" label="状态" :formatter="formatstatus" width="300">

					</el-table-column>
					<el-table-column label="操 作" width="300">
						<template slot-scope="scope">
							<el-button size="medium" type="info" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
							<el-button size="medium" type="danger" icon="el-icon-delete" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="block">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
					 :page-sizes="[10, 30, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="count">
					</el-pagination>
				</div>

			</el-main>
			<el-dialog :title="title" :visible.sync="dialogFormVisible">
				<el-form :model="dialogform">
					<el-form-item label="IDC名称" :label-width="formLabelWidth">
						<el-input v-model="dialogform.idcName" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="区域" :label-width="formLabelWidth">
						<el-input v-model="dialogform.area" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="联系人" :label-width="formLabelWidth">
						<el-input v-model="dialogform.contact" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="联系电话" :label-width="formLabelWidth">
						<el-input v-model="dialogform.contactPhone" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="状态" :label-width="formLabelWidth">
						<el-select v-model="dialogform.status" autocomplete="off">
							<el-option label="使用中" value="0"></el-option>
							<el-option label="下架" value="1"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="dialogFormsubmit">确 定</el-button>
				</div>
			</el-dialog>
		</el-container>
	</div>
</template>

<script>
	import headTop from '@/components/headTop'
	import {
		list,
		update,
		del,
		search
	} from '@/api/idc'
	export default {
		data() {

			return {
				title: '机房信息',
				tableData: [],
				input10: 0,
				formInline: {
					idcName: ''
				},
				dialogform: {
					idcName: '',
					region: '',
					status: '',
					id: ''
				},
				dialogFormVisible: false,
				formLabelWidth: "20",
				count: 0,
				currentPage: 1,
				pageSize: 10
			}
		},
		watch: {
			dialogFormVisible: function() {
				if (this.dialogFormVisible == false) {
					this.dialogform = {};
				}
			}
		},
		created() {
			this.initData(this.currentPage, this.pageSize)
		},
		methods: {
			async initData(currentPage, pageSize) {
				await list(currentPage, pageSize)
					.then((response) => {
						this.tableData = response.items;
						this.count = response.totalNum;
						console.log(response)
					})
			},
			onSearch() {
				search(this.formInline.idcName, this.pageSize)
					.then((response) => {
						this.tableData = response.items;
						this.count = response.totalNum;
						console.log(response)
					})
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				if (row.status == 1) {
					return 'warning-row';
				} else if (row.status == 0) {
					return 'success-row';
				}
				return '';
			},
			createIdc() {
				this.dialogform.status = "0";
				this.dialogFormVisible = true
			},
			handleEdit(index, row) {
				this.dialogform = Object.assign({}, row);
				this.dialogFormVisible = true

			},
			handleDelete(index, row) {
				this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					del(row)
						.then((response => {
							this.$message({
								type: 'success',
								message: '删除成功!'
							});
							this.initData(this.currentPage, this.pageSize)
							this.$store.dispatch('setIdcOptions');
						}))
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});

			},
			formatstatus(row, column, cellValue, index) {
				if (cellValue == 0) {
					return '使用中';
				}
				return '下架';
			},
			dialogFormsubmit() {
				update(this.dialogform)
					.then((response) => {
						console.log(response)
						this.dialogFormVisible = false;
						this.initData(this.currentPage, this.pageSize);
						this.$store.dispatch('setIdcOptions');
					})
					.catch((errir) => {
						console.log(error)
					})
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.initData(this.currentPage, this.pageSize);
			},
			handleCurrentChange(val) {
				this.currentPage = val;
				this.initData(this.currentPage, this.pageSize);
			}
		},
		components: {
			headTop,
		},
	};
</script>

<style>
</style>
